<template>
  <view class="hs-tab">
    <!-- 不可自动，自动指示条会有问题 -->
    <swiper
      class="hs-tab-swiper"
      :duration="200"
      :style="{ height: changeHeight + 'px' }"
      @transition="swiperTransition"
      @animationfinish="animationfinish"
    >
      <swiper-item v-for="(item, index) in menuList" :key="index">
        <!-- <view class="hs-tabs" v-if="index == 0">
          <view class="layout-box">
            <layout006> </layout006>
          </view>
        </view> -->
        <view class="hs-tabs">
          <view class="hs-tab-item" v-for="(ic, ind) in item.list" :key="ind">
            <text
              class="t-icon"
              :style="{ width: iconSize + 'rpx', height: iconSize + 'rpx' }"
              v-if="ic.icon"
              :class="ic.icon"
            ></text>
            <image
              class="image-style"
              :style="{ width: imageSize + 'rpx', height: imageSize + 'rpx' }"
              v-if="ic.imageUrl"
              :src="ic.imageUrl"
            />
            <text class="title">{{ ic.title }}</text>
          </view>
        </view>
      </swiper-item>
    </swiper>
    <!-- 滑块0 -->
    <view v-if="sliderBool == 0" class="slider-container">
      <view
        class="slider-item"
        :style="{ width: sliderHighWidth + 'px', left: sliderLeft + 'px' }"
      >
      </view>
    </view>
    <!-- 滑块1 -->
    <view class="slider-container-1" v-if="sliderBool == 1">
      <view
        class="slider-item"
        :class="current + 1 == i ? 'active' : ''"
        v-for="i in menuList.length"
        :key="i"
      >
      </view>
    </view>
  </view>
</template>

<script>
import {
  defineComponent,
  reactive,
  toRefs,
  onMounted,
  getCurrentInstance,
} from "vue";

import { weipinhuiSmallData } from "@/common/simulatedData.js";
export default defineComponent({
  name: "hstab001",
  props: {
    iconSize: {
      type: Number,
      default: 70, //图标尺寸rpx
    },
    imageSize: {
      type: Number,
      default: 100, //图片尺寸rpx
    },
    propsMenuList: {
      type: Array,
      default: () => {
        return weipinhuiSmallData;
      },
    },
  },
  components: {},
  setup(props) {
    const data = reactive({
      sliderBool: 0, //轮播点位样式 0 or 1
      contentScrollW: 0, // 滚动元素宽度
      changeHeight: 0, // 改变高度
      tabsListSize: [],
      current: 0,
      sliderHighWidth: 0, //滑块的宽度
      sliderLeft: 0, //滑动过程中滑块的left
      endSliderLeft: 0, //滑动结束后的滑块left
      menuList: props.propsMenuList,
    });
    onMounted(() => {
      // 随机展示icon或者图片
      setTimeout(() => {
        getScrollinfo();
        getHsTabsSize();
        setSliderHighSize();
      }, 0);
    });
    // 获取滚动元素信息
    const { proxy } = getCurrentInstance();

    // 获取滑块容器宽度，设置高亮滑块宽度
    const setSliderHighSize = () => {
      const query = uni.createSelectorQuery().in(proxy);
      query
        .select(".slider-container")
        .boundingClientRect((ele) => {
          if (!ele) return;
          data.sliderHighWidth = ele.width / data.menuList.length;
        })
        .exec();
    };
    // 获取滚动元素信息
    const getScrollinfo = () => {
      const query = uni.createSelectorQuery().in(proxy);
      query
        .select(".hs-tab-swiper")
        .boundingClientRect((ele) => {
          // 拿到 scroll-view 组件宽度,计算滑动的最大值
          data.contentScrollW = ele.width;
        })
        .exec();
    };
    // 获取全部滑动页面的高度，一行高度，或者多行高度
    const getHsTabsSize = () => {
      const query = uni.createSelectorQuery().in(proxy);
      query
        .selectAll(".hs-tabs")
        .boundingClientRect((ele) => {
          // 拿到 scroll-view 组件宽度

          let dataLen = ele.length;
          // console.log("ele", ele);
          for (let i = 0; i < dataLen; i++) {
            //  scroll-view 子元素组件距离左边栏的距离
            data.tabsListSize.push({ height: ele[i].height });
          }
          //   改变的高度，动态改变
          data.changeHeight = data.tabsListSize[0].height;
        })
        .exec();
    };
    // 轮播滑动时，计算滑动方向，和高度改变
    const swiperTransition = (e) => {
      const currentDx = e.detail.dx; //横向滚动距离,正值向右，负值向左
      let currentIndex = data.current;
      const dataLen = data.tabsListSize.length;
      //计算比例#### 计算横向滑动宽度和总宽度的*比例*（转为绝对值，正值）
      const wProportion = Math.abs(currentDx / data.contentScrollW);
      if (wProportion > 1) return;
      if (currentDx > 0) {
        // 向右滑动
        currentIndex += 1;
        if (currentIndex >= dataLen) {
          currentIndex = 0;
        }
      } else {
        // 向左滑动
        currentIndex -= 1;
        if (currentIndex < 0) {
          currentIndex = dataLen - 1;
        }
      }
      // 算出高度的范围，计算需要增加的高度范围 ,下一个轮播项的高度减去初始化高度，是需要增加高度的最大范围
      const changeH =
        data.tabsListSize[currentIndex].height -
        data.tabsListSize[data.current].height;
      // 初始高度加上，实际需要增加的高（最大高度范围 * 比例）
      data.changeHeight =
        data.tabsListSize[data.current].height + changeH * wProportion;

      //   以下是计算滑块的过度动
      //  计算滑块下标差，小于零向左划，大于零向右划
      const sliderIndex = data.current - currentIndex;
      //   计算移动的距离
      const leftMovePx =
        data.sliderHighWidth * wProportion * Math.abs(sliderIndex);
      //   根据sliderIndex判断左右left增加或减少
      if (sliderIndex < 0) {
        data.sliderLeft = data.endSliderLeft + leftMovePx;
      } else {
        data.sliderLeft = data.endSliderLeft - leftMovePx;
      }
    };
    const animationfinish = (e) => {
      data.current = e.detail.current;
      data.endSliderLeft = data.sliderLeft;
    };
    return {
      swiperTransition,
      animationfinish,
      ...toRefs(data),
    };
  },
});
</script>

<style scoped lang="less">
.layout-box {
  width: 100%;
}
.hs-tab {
  position: relative;
  padding-bottom: 20rpx;
  background: #fff;
  .hs-tab-swiper {
    width: 100%;

    .hs-tabs {
      display: flex;
      // 换行
      flex-wrap: wrap;
      justify-content: space-between;
      .hs-tab-item {
        width: 20%;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 10rpx 0;
        // .t-icon {
        //   width: 70rpx;
        //   height: 70rpx;
        // }
        .image-style {
          display: block;
          // width: 100rpx;
          // height: 100rpx;
        }
        .title {
          font-size: 24rpx;
          font-weight: 300;
          margin-top: 10rpx;
        }
      }
    }
  }
  .slider-container {
    position: absolute;
    bottom: 5rpx;
    left: 50%;
    height: 6rpx;
    width: 70rpx;
    transform: translateX(-50%);
    display: flex;
    border-radius: 3rpx;
    background: #eee;
    .slider-item {
      position: absolute;
      left: 0;
      height: 100%;
      background: #ff0777;
      border-radius: 3rpx;
    }
  }
  .slider-container-1 {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    .slider-item {
      height: 6rpx;
      width: 6rpx;
      margin: 0 4rpx;
      background: #dddddd;
      border-radius: 3rpx;
      transition: 0.3s;
      &.active {
        background: #ff0777;
        width: 20rpx;
        margin: 0;
      }
    }
  }
}
</style>
